<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
      
       <div class="tab-pane fade in active" id="professor">
           <div class="hero-unit"> 
              
              <c:if test="${professorMB.isSuccess()}">
                              <div class="alert alert-success">
                                  <button type="button" class="close" data-dismiss="alert">x</button>
                                  Profesor vinculado exitosamente
                                  <script>
                                      $(document).ready(function() {
                                          $('input[type="text"]').val('');
                                      });
                                      
                                  </script>
                              </div>
              </c:if>
              <h2>Lista de profesores actuales</h2>
              <button class="btn  btn-info" data-toggle="modal" href="#createProfessor" >Nuevo</button>
              <h3>Filtrar:</h3>
              
                   <!--Tabla de Profesores-->
                   <h:dataTable class="table table-bordered table-striped" style="background-color: white;" value="#{professorMB.professors}" var="professor">
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="Universidad"/>
                            </f:facet>
                            <h:outputText value="#{professor.name}"/>
                            <h:outputText value=" "/>
                            <h:outputText value="#{professor.surname}"/>
                        </h:column>
                        <h:column>
                               <f:facet name="header">
                                    <h:outputText value="Curso"/>
                               </f:facet>
                               <ui:repeat value="#{coursesMB.coursesByProfessor}" var="course" > 
                                    <h:outputText value="#{course.name}"/>
                               </ui:repeat>
                        </h:column>
                        <h:column>
                               <f:facet name="header">
                                  <h:outputText value="Más"/>
                               </f:facet>
                               <img src="../img/icons/icon-delete.jpg"/><img src="../img/icons/icon_edit.gif"/><img src="../img/icons/icon-details.gif"/>
                        </h:column>
                   </h:dataTable>  
            </div> 
       </div>
        
        
       <!--Ventana Modal para vincular profesor-->
        <div id="createProfessor" class="modal hide fade in" style="display: none; ">
        <div class="modal-header">
          <a class="close" data-dismiss="modal">x</a>
          <h2>Vincular Profesor</h2>
          <h:form>
            <h:outputText value="Nombre:"/>
            <br/>
            <h:inputText class="span6" value="#{professorMB.name}"/>
            <br/>
            <h:outputText value="Apellido:"/>
            <br/>
            <h:inputText class="span6" value="#{professorMB.surname}"/>
            <br/>
            <h:outputText value="Correo Electronico:"/>
            <br/>
            <h:inputText class="span6" value="#{professorMB.email}"/>
            <br/>
            <h:outputText value="Usuario:"/>
            <br/>
            <h:inputText class="span6" value="#{professorMB.username}"/>
            <br/>
            <h:outputText value="Contraseña:"/>
            <br/>
            <h:inputText class="span6" value="#{professorMB.password}"/>
            <br/>
            <script type="text/javascript">
tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

        // Theme options
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,cut,copy,paste,pastetext,pasteword,|,undo,redo,|,image,|,link",
        theme_advanced_buttons2 : "formatselect,fontselect,fontsizeselect,|,forecolor,backcolor",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

        // Skin options
        skin : "o2k7",
        skin_variant : "silver",

        

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "js/template_list.js",
        external_link_list_url : "js/link_list.js",
        external_image_list_url : "js/image_list.js",
        media_external_list_url : "js/media_list.js",

        // Replace values for the template plugin
        template_replace_values : {
                username : "Some User",
                staffid : "991234"
        }
});
</script>
        <textarea class="span6" name="content">Bienvenido a SuiLib... podrás publicar y divulgar tu curso.</textarea>
            <h:commandButton value="Agregar" class="btn btn-info" actionListener="#{professorMB.createProfessor()}"/>
          </h:form>
        </div>
        </div>       
    
</html>